<!-- 音标专练详情 -->
<template>
	<AppHeader :title="detailTitle" :banAnimate="true" titleColor="#000" @leftClickEvent="onClickLeft()">
	</AppHeader>
	<div class="container-detail">
		<div class="container-detail-height"></div>
		<!-- autoplay loop  :src="phoneticPracticeDetail.video" -->
		<video class="autoVideo" ref="videoElement">
			<!-- <source :src="phoneticPracticeDetail.video" type="video/mp4"> -->
		</video>
		<img class="autoImg" :src="phoneticPracticeDetail.picture" v-if="phoneticPracticeDetail.picture" />
		<div class="autoText">
			{{ phoneticPracticeDetail.description }}
		</div>
		<div class="fixed-bottom" @click="goPractice">去练习</div>
	</div>
</template>
<script setup>
	import {
		useRouter,
		useRoute
	} from 'vue-router'
	import AppHeader from '@/components/AppHeader.vue'
	import {
		ref,
		toRefs,
		onMounted,
		nextTick,
		reactive
	} from 'vue';
	import {
		getPhoneticPracticeInfo,
	} from '@/api/phoneticPractice'

	import {
		showToast
	} from 'vant';
	import {
		validateAuthAudio
	} from "@/utils/dateFormat"
	const route = useRoute()
	const router = useRouter()
	const videoElement = ref(null) //音频dom


	const state = reactive({
		phoneticPracticeDetail: {}
	})
	let detailTitle = ref('')
	onMounted(() => {
		getDetail()

	})
	const getDetail = () => {
		getPhoneticPracticeInfo({
			versionId: route.query.versionId
		}).then(res => {
			if (res.code == 1) {
				state.phoneticPracticeDetail = res.data
				videoElement.value.src = phoneticPracticeDetail.value.video
				nextTick(() => {
					videoElement.value.play()
				})
				detailTitle.value = state.phoneticPracticeDetail.level3 + '-' + '{' + state
					.phoneticPracticeDetail
					.symbols + '}'
			}
		})
	}
	const {
		phoneticPracticeDetail
	} = toRefs(state)

	const onClickLeft = () => {
		router.go(-1)
	}

	const goPractice = () => {
		// validateAuthAudio().then(isAuthorized => {
		// 	if (isAuthorized) {
				router.push({
					path: '/phoneticPractice/practice',
					query: {
						title: detailTitle.value,
						versionId: route.query.versionId
					}
				})
		// 	} else {
		// 		console.log('录音权限未授权');
		// 		// 你可以在这里处理未授权的情况  
		// 	}
		// }).catch(error => {
		// 	// 处理任何可能抛出的错误（通常来自 reject 的部分）  
		// 	console.error('处理 validateAuthAudio 函数时出错', error);
		// });
	}
</script>
<style scoped lang="scss">
	.container-detail {
		.container-detail-height {
			height: 44px;
		}

		.autoVideo {
			width: 100vw;
		}

		.autoImg {
			width: 136px;
			height: 136px;
			margin: 10px;
		}

		.autoText {
			font-size: 16px;
			color: #333333;
			white-space: pre-wrap;
			margin-left: 10px;
		}

		.fixed-bottom {
			position: fixed;
			bottom: 0;
			width: 100vw;
			font-size: 16px;
			color: #ffffff;
			line-height: 40px;
			text-align: center;
			background: #0CB76C;
		}
	}
</style>